<template>
	<view>
		<view class="navtop"><qz-dropdownbox @input="selsubmit" :width="100" :lists="navlists"></qz-dropdownbox></view>
		<view class="lists flex-y center">
			<view class="item" v-for="(item,index) in list">
				<view class="flex-x space">
					<view v-if="item.homework.time_type==1" class="item-type" style="background: linear-gradient(180deg, #8FF379 0%, #1CBDB4 100%);">课前预习</view>
					<view v-if="item.homework.time_type==2" class="item-type" style="background: linear-gradient(180deg, #FFEAA7 0%, #F2A626 100%);">随堂练习</view>
					<view v-if="item.homework.time_type==3" class="item-type" style="background: linear-gradient(180deg, #8FC6FE 0%, #0080FF 100%);">课后作业</view>
					<view class="item-status" v-if="item.status == 0">未完成</view>
					<view class="item-status" style="color: #C0C4CC;" v-if="item.status != 0">已完成</view>
				</view>
				<view class="flex-x item-content">
					<view class="flex-y item12-8">
						<view class="title">{{item.homework.homework_name}}</view>
						<view class="flex-x around item12-12">
							<view class="item12-6 item-time-text">{{item.homework.begin_time}} 开始</view>
							<view class="item12-6 item-time-text"> {{item.homework.end_time ? item.homework.end_time : '-    ' }}截止</view>
						</view>
					</view>
					<view class="item12-4 flex-x right">
						<!-- <view class="item-btn" v-if="item.status == 0" @click="toDoHomework(item)">去完成</view> -->
						<view class="item-btn" style="background: #FE9900; color: #FFFFFF;" v-if="item.status != 0" @click="toReport(item)">查看报告</view>
					</view>
				</view>
			</view>
			<uni-load-more v-if="list.length >= 6" :status="status" :content-text="contentText" />
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			navlists: [
				{
					index: 0,
					list: [{ name: '作业种类' }, { name: '课前预习' }, { name: '随堂练习' }, { name: '课后作业' }]
				},
				{
					index: 0,
					list: [{ name: '全部状态' }, { name: '进行中' }, { name: '已完成' }]
				}
			],
			page: 1,
			reload: true,
			isPage: false,
			status: 'more',
			contentText: {
				contentdown: '上拉加载更多',
				contentrefresh: '加载中',
				contentnomore: '没有更多',
				contentnot: "没数据"
			},
			list: [], //作业列表
			subject_name:'',
			groupid:'',
			student_id:'',
			selarr:[0,0]
		};
	},
	/* 下拉刷新 */
	onPullDownRefresh() {
		this.publicFunc();
		setTimeout(function() {
			uni.stopPullDownRefresh();
		}, 1000);
	},
	onReachBottom() {
		this.status = "loading";
		this.page = this.page + 1;
		var _this = this;
		setTimeout(function() {
			_this.getList();
		}, 500);
	},
	onLoad(e) {
		this.groupid = e.groupid;
		this.student_id = e.student_id;
		this.subject_name = e.subject_name;
	},
	onShow() {
		this.publicFunc();
	},
	methods: {
		selsubmit: function(e) {
			this.selarr = e;
			this.publicFunc();
		},
		/* 获取作业列表 */
		getList:function() {
			if (this.page == 1) {
				uni.showLoading({
					title: '加载中',
					mask: true
				});
			}
			var data = {
				subject:this.subject_name,
				groupid:this.groupid,
				student_id:this.student_id,
				page: this.page,
				limit: 8,
			};
			if(this.selarr[0]!=0){
				data.time_type = this.selarr[0];
			}
			if(this.selarr[1]!=0){
				data.status=this.selarr[1]-1;
			}
			
			this.$wapi.apiPost("api/v1/parent/homework/student/infos", data).then((res) => {
				var data = res.data.data;
				if (res.data.code == 200 && data.list.length > 0) {
					var list = data.list;
					list.forEach((item, index) => {
						item.homework.begin_time = item.homework.begin_time.substr(5, 11); //获取当前作业开始时间(去秒)
						item.homework.receipt_time = item.homework.receipt_time.substr(5, 11); //获取当前最晚提交时间(去秒)
						item.homework.end_time = item.homework.end_time.substr(5, 11); //获取当前作业答案公布时间(去秒)
					});
					this.list = this.reload ? list : this.list.concat(list);
					this.reload = false;
					this.status = "more";
				} else {
					if (this.reload) {
						this.list = [];
					} else {
						this.page--;
						this.status = "noMore";
					}
				}
				uni.hideLoading();
			});
		},
		publicFunc() {
			this.page = 1;
			this.reload = true;
			this.list = [];
			this.getList();
		},
		toDoHomework(item){
			uni.navigateTo({
				url: '/homework/homework-info?homework_id='+item.unid
			});
		},
		// 作业点击事件
		toReport(item) {
			console.log(item)
			uni.navigateTo({
				url: `/homework/personalReport?student_id=${item.student_id}&homework_id=${item.homework_id}`,
			});
		},
	}
};
</script>

<style lang="scss">
page {
	background: #fafafa;
}

.navtop {
	position: fixed;
	top: 0;
}

.lists {
	width: 100%;
	margin-top: 80upx;
	.item {
		margin-top: 20upx;
		width: 94%;
		background: #ffffff;
		box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
		opacity: 1;
		border-radius: 20px;
		.item-type {
			width: 120upx;
			height: 50upx;
			text-align: center;
			line-height: 50upx;
			color: #ffffff;
			background: linear-gradient(180deg, #8ff379 0%, #1cbdb4 100%);
			font-size: 24upx;
			border-radius: 20upx 0px 20upx 0px;
		}
		.item-status {
			height: 50upx;
			line-height: 50upx;
			font-size: 28upx;
			padding-right: 35upx;
			color: #1FD0A3;
			margin-top: 15upx;
		}
		.item-content{
			margin-top: 10upx;
			height: 150upx;
			.title{
				color: #333333;
				margin-left: 36upx;
				margin-bottom: 20upx;
				font-weight: 500;
			}
			.item-time-text{
				font-size: 24upx;
				color: #666666;
				line-height: 20upx;
				text-align: center;
				
			}
			.item-time-text:first-child{
				border-right: 1upx solid #DCDFE6;
			}
			.item-btn{
				width: 144upx;
				height: 50upx;
				text-align: center;
				line-height: 50upx;
				color: #FFFFFF;
				font-size: 26upx;
				box-shadow: 0upx 2upx 4upx rgba(31, 208, 163, 0.2);
				opacity: 1;
				border-radius: 25upx;
				background: #1FD0A3;
				margin-right: 35upx;
			}
		}
		
	}
}

</style>
